
<template>
  <div class="content">
      <div class="wayLine">
        <p class="wayLineTit">汉城湖专线</p>
        <div class="wayLineName wayBorder">
          <span class="wayIcon startIcon"></span>
          <span class="wayName">始</span>
          <span>海洋大厦</span>
        </div>
        <div class="wayLineName">
          <span class="wayIcon endIcon"></span>
          <span class="wayName">终</span>
          <span>海洋大厦</span>
        </div>
        <div class="planeOrder">去使用</div>
        <span class="delWayLine"></span>
      </div>
    <!--<black-page></black-page>-->
    <div class="addWayLine" @click="addWayLine">
      <span class="addIcon"></span>新增路线
    </div>
  </div>
</template>

<script>
import blackPage from '../../../../components/blackPage/blackPage'
export default {
  // onLoad: function (options) {
  //   console.log(options)
  // },
  components: {
    blackPage
  },
  methods: {
    addWayLine () {
      wx.navigateTo({
        url: './addWayLine/main'
      })
    }
  },
  onShow () {
    wx.setNavigationBarTitle({
      title: '常用线路'
    })
  }
}
</script>

<style scoped>
.wayLine{
  width: 628rpx;
  height: 370rpx;
  border: 1rpx solid #eeeeee;
  border-radius: 15rpx;
  margin: 48rpx auto 0 auto;
  box-shadow: 0rpx 5rpx 8rpx #eee;
  padding: 0 30rpx;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #343434;
  justify-content: center;
  position: relative;
}
.delWayLine{
  width: 46rpx;
  height: 45rpx;
  background: url("~static/img/del.png") no-repeat center/cover;
  display: inline-block;
  position: absolute;
  right: -17rpx;
  top: -15rpx;
}
  .wayLineTit{
    color: #323232;
  }
  .wayLineName{
    padding: 30rpx 0 44rpx 0;
    width: 100%;
    text-align: left;
  }
   .wayBorder{
    border-bottom: 1rpx solid #eee;
  }
  .wayLineName span{
    display: inline-block;
  }
  .wayIcon{
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
  }
  .startIcon{
    border: 4rpx solid #0ac470;
  }
  .endIcon{
    border: 4rpx solid #f5483a;
  }
  .wayName{
    color: #c0c0c0;
    margin: 0 24rpx 0 45rpx;
  }
  .planeOrder{
    width: 140rpx;
    line-height: 50rpx;
    text-align: center;
    border-radius: 45rpx;
    border: 1rpx solid #f5483a;
    color: #f5483a;
  }
  .addWayLine{
    text-align: center;
    font-size: 28rpx;
    color: #ee463b;
    vertical-align: middle;
    margin-top: 85rpx;
  }
  .addIcon {
    width: 40rpx;
    height: 40rpx;
    background: url("~static/img/append.png") no-repeat center/cover;
    display: inline-block;
    vertical-align: middle;
    margin-right: 20rpx;
  }
</style>
